<template>
  <div>{{ person.name }}</div>     
  <div>{{ person.age }}</div>     
  <div>{{ person.car.c1 }}、{{ person.car.c2 }}</div>     
  <button @click="changeName">点击修改姓名</button>
  <button @click="changeAge">点击修改年龄</button>
  <button @click="changeCar1">点击修改车1</button>
  <button @click="changeCar2">点击修改车2</button>
  <button @click="changeCar">点击修改车</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

  let person  = reactive({
    name:"王博",
    age:24,
    car:{
        c1:"宝马",
        c2:"奥迪"
    }
  })

  const changeName = () => {
    person.name = "王博2"
  }
  const changeAge = () => {
    person.age = 25
  }
  const changeCar1 = () => {
    person.car.c1 = "奔驰"
  }
  const changeCar2 = () => {
    person.car.c2 = "保时捷"
  }
  const changeCar = () => {
    person.car = {
      c1:"奔驰111",
      c2:"保时捷222"
    }
  }

  
  
</script>



<style scoped>
 
</style>
